<template>
  <div class="form-container">
    <div class="form-header">
      <el-button type="primary" @click="createForm">创建表单</el-button>
    </div>
    <div class="form-body">
      <el-table ref="multipleTable"
                :data="tableData.data"
                tooltip-effect="dark"
                stripe
                highlight-selection-row
                max-height="750"
                style="width: 100%">
        <el-table-column prop="name" label="字段名称"></el-table-column>
        <el-table-column prop="state" label="状态">
          <template #default="scope">
            {{ scope.row.state === '0' ? '开启' : '关闭'}}
          </template>
        </el-table-column>
        <el-table-column prop="parentId" label="父级id"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-link type="primary" style="margin-right: 10px" @click="editForm(scope.row)">修改</el-link>
            <!--            <el-link type="warning" style="margin: 0 6px">关闭</el-link>-->
            <el-link type="danger" @click="delOptionList(scope.row.id)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <editBoxList v-if="showEditOption" :fieldId="fieldId" :fieldType="fieldType" @showEditOptionEmit="showEditOptionEmit"></editBoxList>
</template>

<script setup>
import { reactive,ref } from 'vue'
import { useRouter } from 'vue-router'
import { _delOptionList, _getOptionList} from "../../http/api.js";
import {ElLoading, ElMessage,ElMessageBox} from "element-plus";
import editBoxList from './editBoxList.vue'

const router = useRouter()
const tableData = reactive({
  data:[]
})
const showEditOption = ref(false); // 显示编辑字段
const fieldType = ref(''); // 一级字段别名
const fieldId = ref(''); // 一级字段id
// 创建表单
const createForm = () => {
  router.push({ path: '/index/formConfiguration'})
}
// 获取选项列表
const getOptionList = (id) => {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  _getOptionList(id)
      .then(res => {
        console.log(res);
        loading.close();
        if(res.data.ok) {
          let item = res.data.data;
          tableData.data = item;
        }
      })
      .catch(err => {
        console.log(err);
        loading.close();
        ElMessage({message: '网络异常', type: 'error' });
      })
}
getOptionList(0);

// 修改选项
const editForm = (item) => {
  console.log(item);
  fieldType.value = item.fieldType;
  fieldId.value = item.id;
  showEditOption.value = true;
}

// 选项弹框监听
const showEditOptionEmit = () => {
  showEditOption.value = false;
  getOptionList(0);
}
// 删除模板
const delOptionList = (id) => {
  console.log(id);
  ElMessageBox.confirm('删除该选项?','提示', {confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning'})
      .then(() => {
        _delOptionList(id)
            .then(res => {
              console.log(res);
              if(res.data.ok) {
                ElMessage({ type: 'success', message: '删除成功', })
                getOptionList(0);
              }
            })
            .catch(err => {
              console.log(err);
            })
      })
      .catch(() => {})

}
</script>

<style lang="scss" scoped>
.form-container{
  padding: 10px;
  .form-header{
    padding: 10px;
    background-color: #ffffff;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: right;
  }
  .form-body{
    padding: 20px;
    background-color: #ffffff;
  }
}

</style>
